<template>
  <div class="goodsList">
    <div class="content">
      <div class="good-list-box">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            v-model:error="error"
            error-text="服务器累了，点击重新加载"
            finished-text="  "
            offset="500"
            :immediate-check="false"
            @load="onLoad"
            :key="2"
          >
            <div class="good-list">
              <div
                class="good-item"
                v-for="(value, index) in items"
                :key="index"
                :sku="value.F_ProductId"
                :hei="index"
              >
                <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
                <div
                  class="good-card"
                  @click="
                    $router.push({
                      path: '/product',
                      query: { id: value.F_ProductId, parents_id: username },
                    })
                  "
                >
                  <van-image
                    class="product-img lazy-img"
                    lazy-load
                    :src="'http://higuang365.com/' + value.F_pic_url"
                  />
                  <div class="good-desc">
                    <div class="title">{{ value.F_Name }}</div>
                    <div class="county">
                      <img
                        class="county-icon"
                        v-if="value.F_yuliu2"
                        :src="'http://higuang365.com/' + value.F_yuliu2"
                        alt=""
                      />

                      <div class="county-title">
                        {{ value.F_BrandCountrie }}
                      </div>
                    </div>
                    <div class="price-box">
                      <span class="timelimit">新品</span>
                      <div>
                        <span class="price"
                          >¥ <span>{{ value.F_BdPrice }}</span></span
                        >
                        <span class="estimate">￥{{ value.F_Price }}</span>
                      </div>
                    </div>

                    <div
                      class="share"
                      @click.stop="
                        addGoodsCart(value.F_yuliu3, value.F_ProductId)
                      "
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onActivated,
  onDeactivated,
} from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default defineComponent({
  name: "electrical",
  setup() {
    const data = reactive({
      items: [],
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize: 20,
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: "50",
        strlv: getCookie("MLV"),
      });
      // console.log(res);
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.items.push(...res[1]);
      data.loading = false;
      data.pageNum += 1;
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
    };
    const onRefresh = () => {
      data.items = [];
      data.pageNum = 1;
      data.finished = false;
      onLoad();
    };
    // if(data.items.length==0){
    //         onLoad();
    // }
    let rushbuyScroll = 0;
    onActivated(() => {
      // console.log(rushbuyScroll);
      if (data.items.length == 0) {
        onLoad();
      }
      document.getElementById("app").scrollTop = rushbuyScroll;
    });
    onDeactivated(() => {
      //  console.log(rushbuyScroll)
      rushbuyScroll = document.getElementById("app").scrollTop;
    });
    return { ...toRefs(data), addGoodsCart, onLoad, onRefresh };
  },
});
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 0 3rem;
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(100vw - 2rem);
    margin: auto;
  }
  .good-item {
    box-sizing: border-box;
    width: 100%;
    margin: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    animation: jello-horizontal 1s both;
    .good-card {
      height: 100%;
      display: flex;
    }
    .product-img {
      display: block;
      min-width: 12rem;
      width: 12rem;
      height: 12rem;
      border-radius: 1rem;
      overflow: hidden;
    }
    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex-grow: 1;
      text-align: left;
      font-size: 1.2rem;
      padding: 1rem 1rem 0;
      position: relative;
      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        font-size: 1.3rem;
        // height: 3.2rem;
        line-height: 2rem;
        letter-spacing: 0.5px;
        margin-top: 2px;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price-box {
        width: 15rem;
        background: url("")
          no-repeat;
        background-size: contain;
        padding: 0.2rem 1rem;
        display: flex;
        justify-content: space-between;
      }
      .price {
        font-size: 1.3rem;
        // color: #ff0036;
        color: #fff;
        font-weight: bold;
        line-height: 2.5rem;
        span {
          font-size: 1.7rem;
        }
      }
      .timelimit {
        float: right;
        line-height: 2.6rem;
        color: #b86011;
      }
      .share {
        height: 2.5rem;
        width: 2.5rem;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        // background-color: #ff1f10;
        // background-image: none;
        // mask: url(http://higuang365.com/public/images/common/shop/i-miaosha-red.e6c30bae.png) no-repeat;
        // mask-size: 100% 100%;
        background: url("http://higuang365.com/public/images/common/shop/i-miaosha-red.png")
          no-repeat;
        background-size: contain;
      }
      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
